<template>
  <div class="card-full">
    <h2>用户注册</h2>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="demo-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">注册</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="handleUpdateForm">更新表单数据 (模拟)</el-button>
        <el-button @click="logCleanedForm">查看清理后的表单</el-button>
      </el-form-item>
    </el-form>

    <div class="debug-info">
      <h3>当前表单数据:</h3>
      <pre>{{ form }}</pre>
      <h3>原始表单数据 (用于重置):</h3>
      <pre>{{ initialFormData }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useForm } from "@/hooks/useForm";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";

// 1. 定义你的表单数据模型
interface RegistrationForm {
  username: string;
  password: string;
  confirmPassword: string;
  email: string;
}

// 2. 定义初始表单数据
const initialFormData: RegistrationForm = {
  username: "",
  password: "",
  confirmPassword: "",
  email: ""
};

// 3. 定义表单验证规则
const registrationRules = reactive<FormRules<RegistrationForm>>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 15, message: "用户名长度在3到15个字符", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码至少需要6个字符", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== form.password) {
          callback(new Error("两次输入的密码不一致！"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入有效的邮箱地址", trigger: "blur" }
  ]
});

// 4. 使用你的 useForm hook
// 将 initialFormData 作为 initialForm 传递，并将 registrationRules 作为 rules 传递
const { formRef, form, rules, resetForm, setForm, cleanForm, validate, validateField } = useForm<RegistrationForm>({
  initialForm: initialFormData,
  rules: registrationRules
});

// 5. 提交表单的处理函数
const handleSubmit = async () => {
  try {
    const validForm = await validate(); // 调用 validate 方法进行表单验证
    console.log("表单验证成功，提交的数据：", validForm);
    ElMessage.success("注册成功！数据已提交到控制台。");
    // 在这里执行实际的注册逻辑，例如发送 API 请求
    // resetForm(); // 提交成功后可以选择重置表单
  } catch (fields) {
    console.error("表单验证失败，错误字段：", fields);
    ElMessage.error("请检查表单填写。");
  }
};

// 6. 模拟更新表单数据
const handleUpdateForm = () => {
  setForm({
    username: "testUser",
    email: "test@example.com"
  });
  ElMessage.info("表单数据已更新。");
};

// 7. 查看清理后的表单数据
const logCleanedForm = () => {
  const cleanedData = cleanForm();
  console.log("清理空值后的表单数据：", cleanedData);
  ElMessage.info("清理空值后的表单数据已输出到控制台。");
};
</script>

<style scoped>
.demo-form {
  width: 600px;
}
.debug-info {
  padding: 15px;
  margin-top: 30px;
  background-color: var(--color-bg-main);
  border: 1px dashed var(--color-border-2);
  border-radius: 5px;
}
pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>
